<template>
  <div>
    <el-card>
      <el-tabs v-model='activeName' type='card' @tab-click='handleClick'>
        <el-tab-pane label='能耗时比' name='first'>
          <el-form ref='searchForm' :model='form' label-width='80px' size='mini'>
            <div class='formtop'>
              <el-form-item label='特殊资源'>
                <el-radio-group v-model='form.type'>
                  <el-radio :label='1'>同比</el-radio>
                  <el-radio :label='2'>环比</el-radio>
                  <el-radio :label='3'>自定义</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item
                label='基准日期'
                prop='day_time'
                label-width='auto'
                :rules="[
                  { required: true, message: '基准日期不能为空'}
                ]"
              >
                <el-date-picker
                  v-model='form.day_time'
                  type='date'
                  placeholder='选择日期'
                  style='width: 100%;'
                  format='yyyy-MM-dd'
                  value-format='yyyy-MM-dd'
                  :picker-options='pickerOptions'
                />
              </el-form-item>
              <el-form-item
                v-if='form.type==3'
                label-width='auto'
                label='对比日期'
                prop='compare_date'
                :rules="form.type!==3?[
                  { required: false}
                ]:[
                  { required: true, message: '对比日期不能为空'}
                ]"
              >
                <el-date-picker
                  v-model='form.compare_date'
                  type='date'
                  placeholder='选择日期'
                  format='yyyy-MM-dd'
                  value-format='yyyy-MM-dd'
                  style='width: 100%;'
                  :picker-options='pickerOptions'
                />
              </el-form-item>
            </div>
            <div class='formtop'>
              <el-form-item label='数据周期'>
                <el-radio-group v-model='form.period_type'>
                  <el-radio :label="'day'">日</el-radio>
                  <el-radio :label="'month'">月</el-radio>
                  <el-radio :label="'year'">年</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button type='primary' @click='search'>查询</el-button>
              </el-form-item>
            </div>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label='能耗类比' name='second'>
          <el-form ref='formAnalogy' :model='formAnalogy' label-width='80px' size='mini'>
            <div class='formtop'>
              <el-form-item
                label-width='auto'
                label='日期选择'
                :rules="
                  [
                    { required: true, message: '请选择日期'}
                  ]"
              >
                <el-radio-group v-model='formAnalogy.type'>
                  <el-radio label='1'>昨日</el-radio>
                  <el-radio label='2'>上月</el-radio>
                  <el-radio label='3'>上季度</el-radio>
                  <el-radio label='4'>上年</el-radio>
                  <el-radio label='5'>自定义</el-radio>
                </el-radio-group>

              </el-form-item>
              <el-form-item>
                <el-button type='primary' @click='search2'>查询</el-button>
              </el-form-item>

            </div>
            <div v-if="formAnalogy.type ==='5'" class='formtop'>
              <el-form-item
                label='数据周期'
                :rules="formAnalogy.type==='5'? [
                  { required: true, message: '请选择周期'}
                ]: [
                  { required: false}
                ]
                "
              >
                <el-radio-group v-model='formAnalogy.period_type'>
                  <el-radio label='day'>日</el-radio>
                  <el-radio label='month'>月</el-radio>
                  <el-radio label='year'>年</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label='基准日期'>
                <el-date-picker
                  v-model='formAnalogy.day_time'
                  type='date'
                  placeholder='选择日期'
                  format='yyyy-MM-dd'
                  value-format='yyyy-MM-dd'
                  style='width: 100%;'
                />
              </el-form-item>
            </div>
            <div v-if="activeName ==='second'" class='formtop'>
              <el-form-item label='选择对象'>
                <div style='display: flex;align-items: center;'>
                  <div
                    v-for='(item,index) in nowTreeArr'
                    :key='item.id'
                    class='myCheck'
                    name='type'
                    @click='deleteType(item,index)'
                  >{{ item.name }}
                    <i class='el-icon-circle-close' />
                  </div>
                </div>
              </el-form-item>

            </div>

          </el-form>
        </el-tab-pane>
      </el-tabs>
      <el-divider />
      <div id='dataAnalysis' />
      <el-divider />
      <div class='bottom_box'>
        <div id='typeStatistics' />
        <div id='gradeStatistics' />
      </div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import commMix from './commonMix.js'
import { getPowerContrast, getPowerContrastAnalogy } from '@/api/efficiencyAnalysisApi.js'

export default {
  name: 'electricityComparisonChild',
  components: {},
  mixins: [commMix],
  props: {
    choseData: {
      type: Object,
      default: () => {
      },
    },
  },
  data() {
    return {
      echartsData: {},
      activeName: 'first',
      form: {
        monitor_id: '',
        type: 1,
        day_time: null,
        period_type: 'day',
        compare_date: '',
      },
      formAnalogy: {
        type: '1',
        day_time: null,
        period_type: '',
        monitor_id: [],
      },
      nowTreeArr: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
    }
  },
  watch: {
    activeName: { // 监听的对象
      deep: true, // 深度监听设置为 true
      handler: function(newV, oldV) {
        if (newV === 'first') {
          this.search()
        } else {
          if (this.nowTreeArr.length === 1) {
            this.$message({
              showClose: true,
              message: '请选择两个支路',
              type: 'success',
            })
          } else {
            this.search2()
          }
        }
      },
    },
    'form.day_time': {
      handler: (newV, oldV) => {
        console.log(newV)
      },
      deep: true,
    },
  },

  created() {
  },
  mounted() {
  },
  methods: {
    changeChoseData() {
      if (this.activeName === 'second') {
        for (var i = 0; i < this.nowTreeArr.length; i++) {
          if (this.choseData.id === this.nowTreeArr[i].id) {
            return
          }
        }
        this.nowTreeArr.push(this.choseData)
      } else {
        this.form.monitor_id = [this.choseData.id]
        this.form.day_time = this.getDay(0)
        this.form.compare_date = this.getDay(0)
        this.search()
      }
    },
    search() {
      this.$refs['searchForm'].validate((valid) => {
        if (valid) {
          getPowerContrast(this.form).then((res) => {
            this.echartsData = res.data
            this.setDataAnalysis()
            this.setTypeStatistics()
            this.setGradeStatistics()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 能耗类比
    search2() {
      this.$refs['formAnalogy'].validate((valid) => {
        if (valid) {
          if (this.nowTreeArr.length === 0) {
            this.$message({
              showClose: true,
              message: '请选择分支',
              type: 'error',
            })
            return
          }
          this.formAnalogy.monitor_id = []
          for (var i = 0; i < this.nowTreeArr.length; i++) {
            this.formAnalogy.monitor_id.push(this.nowTreeArr[i].id)
          }
          getPowerContrastAnalogy(this.formAnalogy).then((res) => {
            this.echartsData = res.data
            this.setDataAnalysis()
            this.setTypeStatistics()
            this.setGradeStatistics()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(tab, event) {
    },
    setGradeStatistics() {
      echarts.dispose(document.getElementById('gradeStatistics'))
      var myChart = echarts.init(document.getElementById('gradeStatistics'))
      var option = {
        title: {
          text: '用能占比',
          left: 'center',
        },
        tooltip: {
          trigger: 'item',
        },
        legend: {
          orient: 'vertical',
          left: 'left',
        },
        series: [
          {
            name: '用能占比',
            type: 'pie',
            radius: '50%',
            data: this.echartsData.pie,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      }
      myChart.setOption(option)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    },
    setTypeStatistics() {
      echarts.dispose(document.getElementById('typeStatistics'))
      var myChart1 = echarts.init(document.getElementById('typeStatistics'))
      // 绘制图表
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          data: this.activeName === 'first' ? this.echartsData.legend : [''],
        },
        yAxis: {
          type: 'value',
          name: '单位（A）',
        },
        legend: {
          data: this.echartsData.legend,
          itemGap: 5,
        },
        series: [],
      }
      if (this.activeName === 'first') {
        option.series = {
          data: this.echartsData.bar,
          type: 'bar',
          showBackground: true,
          barWidth: 30,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
          itemStyle: {
            normal: {
              barBorderRadius: [20, 20, 0, 0],
            },
          },
        }
      } else {
        this.echartsData.bar.forEach((item, index) => {
          option.series.push({
            data: item.data,
            type: 'bar',
            name: item.name,
            showBackground: true,
            barWidth: 30,
            backgroundStyle: {
              color: 'rgba(180, 180, 180, 0.2)',
            },
            itemStyle: {
              normal: {
                barBorderRadius: [20, 20, 0, 0],
              },
            },
          })
        })
      }

      myChart1.setOption(option)
      window.addEventListener('resize', () => {
        myChart1.resize()
      })
    },
    setDataAnalysis() {
      echarts.dispose(document.getElementById('dataAnalysis'))
      var myChart2 = echarts.init(document.getElementById('dataAnalysis'))
      // 绘制图表
      var option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
            },
          },
        },
        dataZoom: [
          {
            type: 'inside',
          },
        ],

        grid: {
          top: '10%',
          left: '5%',
          right: '0%',
          bottom: '10%',
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ['line', 'bar'] },
            saveAsImage: { show: true },
          },
        },
        xAxis: {
          type: 'category',
          data: this.echartsData.xData,
        },
        yAxis: {
          type: 'value',
          name: '单位（A）',
        },
        legend: {
          // data: this.echartsData.legend,
          itemGap: 5,
        },
        series: [],
      }
      this.echartsData.series.forEach((item, index) => {
        option.series.push({
          data: item.data,
          type: 'bar',
          name: item.name,
          showBackground: true,
          barWidth: 10,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)',
          },
          itemStyle: {
            normal: {
              barBorderRadius: [20, 20, 0, 0],
            },
          },
        })
      })

      myChart2.setOption(option)
      window.addEventListener('resize', () => {
        myChart2.resize()
      })
    },
  },
}
</script>

<style lang='scss' scoped>
::v-deep .tableHead {
  background-color: #EDF1F8 !important;
}

.formtop {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.min_box {
  width: 100%;
  height: 70vh;
}

#dataAnalysis {
  width: 100%;
  height: 35vh;
}

.bottom_box {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;

  & > div {
    width: 45%;
    height: 34vh;
  }
}

::v-deep .is-required {
  display: flex;
  align-items: center;
  margin-left: 20px;
}

.myCheck {
  padding: 0 30px 0 20px;
  border: 1px solid #c6c6c6;
  border-radius: 10px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;

  i {
    color: #c6c6c6;
    font-size: 25px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
</style>
